<template>
  <div class="box2">
    <el-form
      :model="ruleForm"
      :rules="rules"
      :inline="false"
      ref="ruleForm"
      label-width="200px"
      class="demo-ruleForm"
      size="medium"
    >
      <div class="must">
        <el-form-item label="被许可人类型：" prop="picType">
          <span id="star">*</span>
          <el-select v-model="ruleForm.picType" @change="changeAplli" style="width:80%" placeholder="请选择被许可人类型">
            <el-option
              v-for="(item,index) in appliPerson"
              :label="item.title"
              :key="index"
              :value="item.value"
              style="width:80%"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 身份证照片(正反面) -->
        <el-form-item prop="DBupload" 
          label="身份证照片(正反面)：" 
          v-if="ruleForm.picType==1" 
          :rules=" {  required: true,validator:DBLicense,trigger: 'change'  }">
          <upfile :callback="DBImageMain" :file_config="{name:3}">
            <img :src="mconfig.host + ruleForm.DBidcardAddr" alt=""  v-if="ruleForm.DBidcardAddr">
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
            <img src="../../assets/imgs/inform.png">
            <span>示例:</span>
            </div>
            <examimg :imgType="1"></examimg>
          </div>
          <span style="color:#f96900">请上传 身份证正反面 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>
        <!-- 身份证照片(正面) -->
        <el-form-item prop="uploads" label="身份证照片(正面)：" v-if="ruleForm.picType==1" :rules=" {  required: true,validator:idcardAddrLicense,trigger: 'change'  }">
          <upfile :callback="backCardImageMain" :file_config="{name:1}">
            <!-- <div class="back-img"> -->
              <img :src="mconfig.host + ruleForm.idcardAddr" alt=""  v-if="ruleForm.idcardAddr">
            <!-- </div> -->
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
                  <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
            </div>
            <examimg :imgType="2"></examimg>
          </div>
          <span style="color:#f96900">请上传 身份证正面 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>
        <el-form-item prop="upload" label="营业执照：" v-if="ruleForm.picType==1 || ruleForm.picType==0" 
        :rules=" ruleForm.picType == 0 ?{  required: true,validator:bussiAddrLicense,trigger: 'change'  }:[]">
          <upfile :callback="backImage" :file_config="{name:2}">
            <!-- <div class="back-img2"> -->
              <img :src="mconfig.host + ruleForm.bussiAddr" alt="" v-if="ruleForm.bussiAddr">
            <!-- </div> -->
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
                  <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
            </div>
            <examimg :imgType="0"></examimg>
          </div>
          <span style="color:#f96900">请上传 营业执照 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>
        <el-form-item prop="otherUpload" label="其他合法执照：" v-if="ruleForm.picType==9"
        :rules="{  required: true,validator:otherImgLicense,trigger: 'change'  }">
          <upfile :callback="otherImg" :file_config="{name:9}">
              <img :src="mconfig.host + ruleForm.otherAddr" alt="" v-if="ruleForm.otherAddr">
          </upfile>
          <span style="color:#f96900">请上传 其他合法执照 清晰图片(jpg,png格式)，图片大小不能超过500k</span>
        </el-form-item>


        <el-form-item label="被许可人名称(中文)：" prop="nameValue">
          <el-input v-model="ruleForm.nameValue" placeholder="请填写姓名"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>示例：张三</span>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="(英文)：" prop="englishValue">
          <el-input v-model="ruleForm.englishValue" placeholder="请填写姓名"></el-input>
          <div class="inform">
          </div>
        </el-form-item>
        <el-form-item label="被许可人地址(中文)：" prop="siteValue">
          <el-input v-model="ruleForm.siteValue" placeholder="请填写地址"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>示例：北京市xx区xx街xx号</span>
            </div>
          </div>
        </el-form-item>
        <!-- <el-form-item label="联系人: " prop="Linkman">
          <el-input v-model="ruleForm.Linkman" placeholder="请填写联系人"></el-input>
        </el-form-item> -->
        <el-form-item label="(英文)：" prop="englishSiteValue">
          <el-input v-model="ruleForm.englishSiteValue" placeholder="请填写地址"></el-input>
          <div class="inform">
          </div>
        </el-form-item>
        <el-form-item label=" 商标注册号：" prop="loginNum">
          <el-input v-model="ruleForm.loginNum" placeholder="请填写商标注册号"></el-input>
        </el-form-item>
        <el-form-item label="是否共有商标：" prop>
          <span id="star">*</span>
          <el-radio-group v-model="ruleForm.radio" @change="clearz">
            <el-radio class="input" :label="1">是</el-radio>
            <el-radio class="input" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="ruleForm.radio" class="common">
          <el-form-item label="其他共有许可人：">
              <both :callback="getBoth" :append="$store.state.alterData.append" :class_id="$route.query.id" style="width:80%"></both>
          </el-form-item>
        </div>
        <!-- <div v-if="ruleForm.radio" class="common">
          <el-form-item label="其他共有人" prop="person_type"></el-form-item>
          <div v-for="(item, index) in ruleForm.common" :key="index" class="common-list">
            <el-form-item class="upload" label="共有人照片：" prop="upload">
            </el-form-item>
            <el-form-item
              :label="item.name"
              :key="item.key"
              :prop="'common.' + index + '.partNameCh'"
              :rules="{required: true, message: '选项不能为空', trigger: 'blur'}"
            >
              <el-input v-model="item.partNameCh" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item :label="item.englishName" prop="person_type">
              <el-input v-model="item.partNameEn" placeholder="请填写姓名"></el-input>
            </el-form-item>
            <el-form-item
              :label="item.site"
              :key="item.key"
              :prop="'common.' + index + '.partAddrCh'"
              :rules="{required: true, message: '选项不能为空', trigger: 'blur'}"
            >
              <el-input v-model="item.partAddrCh" placeholder="请填写地址"></el-input>
            </el-form-item>
            <el-form-item :label="item.englishSite" prop="person_site">
              <el-input v-model="item.partAddrEn" placeholder="请填写地址"></el-input>
            </el-form-item>
          </div>
          <el-button icon="el-icon-plus" @click="plus" circle style="margin-left:350px"></el-button>
          <el-button icon="el-icon-minus" @click="dele" circle></el-button>
        </div>
        <div class="line"></div> -->

        <el-form-item label="原商标使用许可备案号：" prop="originNum">
          <el-input v-model="ruleForm.originNum" placeholder="请填写"></el-input>
        </el-form-item>
        <el-form-item label=" 提前终止日期：" prop="prmsDate">
          <el-date-picker v-model="ruleForm.prmsDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label=" 提前终止理由：" prop="endWithdrawal">
          <el-input type="textarea" v-model="ruleForm.endWithdrawal" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item class="upload" label="网上确认书：" prop="afterAmount">
          <span id="star">*</span>
          <upfile :callback="setSure">
            <img
              v-if="ruleForm.qrfilesUrl"
              style="width:148px;height:148px;margin-bottom:10px"
              :src="ruleForm.qrfilesUrl"
              alt
            />
          </upfile>
          <div class="exam-img">
            <div class="img-inform">
                  <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
            </div>
            <examimg :imgType="7"></examimg>
          </div>
          <div>
            <span class="informs">
              请点此
              <a :href="mconfig.host + '/file/download?fileType=4'">下载网上确认书</a>,查到相应商标编号并填充
            </span>
            <br />
            <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
          </div>
        </el-form-item>

        <el-form-item label="其他附件：" prop="dengjichenluofile">
          <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提示：其他附件</span>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="btns">
            <el-button type="primary" @click="outStep">上一步</el-button>
            <el-button type="primary" @click="submitCheck('ruleForm')">提交并审核</el-button>
          </div>
        </el-form-item>
        <el-dialog
          class="dialog"
          :show-close="false"
          :center="true"
          :visible.sync="dialogVisible"
          width="460px"
          :before-close="handleClose"
        >
          <div class="hint">
            <img src="../../assets/imgs/branch.png" alt="提示图片" />
            <span style="color:#F96900">选择您想去办理的网点</span>
          </div>
          <el-form-item label="选择网点：" prop="value">
            <el-select v-model="branchNetworkId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button type="info" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog
          class="hintMsg"
          :show-close="false"
          title="温馨提示"
          :visible.sync="centerDialogVisible"
          @close="skip()"
          width="462px"
        >
          <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
import upfile from "../common/upfile.vue";
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
export default {
  components: { upfile,both,examimg,uploads },
  data() {
    return {
      // 是否显示图片
      showImgOne: false,
      showImgTwo: false,
      uploadImg: false,
      commonData:[],
      //网点列表
      options: [],
      appliPerson: [],
      //提交成功弹出框变量
      centerDialogVisible: false,
      //网点弹出框控制变量
      dialogVisible: false,
      //提交表单
      formData: new FormData(),
      //表单唯一id
      classId: "",
      // //共有人模板
      // common: [
      //   {
      //     name: "名称(中文)：",
      //     englishName: "(英文)：",
      //     site: "地址(中文)：",
      //     englishSite: "(英文)：",
      //     partNameCh: "",
      //     partNameEn: "",
      //     partAddrCh: "",
      //     partAddrEn: "",
      //   },
      // ],
      //填写的信息
      ruleForm: {
        // Linkman: "", // 联系人
        // organization: "", // 代理机构名称
        loginNum: "", // 商标注册号
        radio: 0, // 是否有共有商标
        nameValue: "", // 被许可人名称（中文）
        englishValue: "", // 被许可人名称（英文）
        siteValue: "", // 被许可人地址(中文)
        englishSiteValue: "", // 被许可人地址(英文)
        originNum: "", // 原商标使用许可备案号
        prmsDate: "", // 提前终止日期
        endWithdrawal: "", // 提前终止理由
        qrfile: "", // 网上确认书
        qrfilesUrl: "", // 后端返回确认书图片框地址
        picType:0,
        upload: "",
        uploads: "",
        DBupload:"",
        dengjichenluofile:[],
        otherUpload:"",
        picdbcard:"",// 身份证正反面
        picdcard: "", // 身份证正面
        picbussi: "",
        idcardAddr:"",  // 身份证正面地址
        bussiAddr:"", // 营业执照地址
        otherAddr:"",
        DBidcardAddr:"",//身份证正反面
        //共有人模板
        common: [
          {
            name: "名称(中文)：",
            englishName: "(英文)：",
            site: "地址(中文)：",
            englishSite: "(英文)：",
            partNameCh: "",
            partNameEn: "",
            partAddrCh: "",
            partAddrEn: "",
          },
        ],
      },
      branchNetworkId: "", // 网点编号
      uploadImg: false,
      rules: {
        loginNum: [
          {
              required: true,
              message: "请输入注册号",
              trigger: "blur",
          },
          {
              pattern: /^[A-Za-z0-9]{0,30}$/,
              message: "请输入正确的注册号",
              trigger: "blur",
          },
        ],
        radio: [{ required: true, message: "选项不能为空", trigger: "change" }],
        nameValue: [
          { required: true, message: "被许可人名称不能为空", trigger: "blur" },
          {
            pattern: /[\u4e00-\u9fa5]/,
            message: "请输入正确的中文名称",
            trigger: "blur",
          },
        ],
        // Linkman: [
        //   { required: true, message: "选项不能为空", trigger: "change" },
        //   {
        //     pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
        //     message: "请输入正确的中文名称",
        //     trigger: "blur",
        //   },
        // ],
        siteValue: [
          { required: true, message: "被许可人地址不能为空", trigger: "blur" },
          // {
          //   // pattern: /^[\u4E00-\u9FA5]{9,30}$/,
          //   pattern: /^((省|自治区).+(市))|(市|行政区|自治州).+(区|县).+(路|街|道|村).+号.*$/,
          //   message: "请输入正确的地址",
          //   trigger: "blur",
          // },
        ],
        // dengjichenluofile: [
        //   { required: true, message: "附件不能为空", trigger: "change" },
        // ],
        originNum: [
          {
              required: true,
              message: "请输入备案号",
              trigger: "blur",
          },
          {
              pattern: /^[A-Za-z0-9]{0,30}$/,
              message: "请输入正确的备案号",
              trigger: "blur",
          },
        ],
        prmsDate: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
        endWithdrawal: [
          { required: true, message: "选项不能为空", trigger: "change" },
        ],
      },
      counts: 0,
    };
  },

  watch: {
    //通过数据监听的方式将共有人模板中的信息同步到proAppends中
    // common: {
    //   handler(newName, oldName) {
    //     this.common.forEach((item, index) => {
    //       this.proAppends[index].partNameCh = item.value;
    //       this.proAppends[index].partNameEn = item.englishValue;
    //       this.proAppends[index].partAddrCh = item.siteValue;
    //       this.proAppends[index].partAddrEn = item.englishSiteValue;
    //     });
    //   },
    //   deep: true,
    // },
  },
  methods: {
    backUrl(url,file_config){
        this.ruleForm[file_config["field"]].push(url)
    },
    delUrl(index,file_config){
        this.ruleForm[file_config["field"]].splice(index,1)
        this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
    },
    // 提交并审核验证
    getBoth(value){
        console.log(value,145645);
        this.commonData = value;
    },
    changeAplli(){
      console.log(this.ruleForm.picType)
      this.ruleForm.nameValue = '';
      this.ruleForm.siteValue = '';
      this.ruleForm.idcardAddr = '';
      this.ruleForm.bussiAddr = '';
      this.ruleForm.otherAddr = '';
      this.ruleForm.DBidcardAddr = '';
    },
    idcardAddrLicense(rule, value, callback) { //验证规则
        if (this.ruleForm.idcardAddr) {
            callback();
        } else {
            callback(new Error("请上传身份证证件"));
        }
    },
    DBLicense(rule, value, callback) { //验证规则
        if (this.ruleForm.DBidcardAddr) {
            callback();
        } else {
            callback(new Error("请上传身份证正反面"));
        }
    },
    bussiAddrLicense(rule, value, callback) { //验证规则
      if (this.ruleForm.picType==0) {
        if (this.ruleForm.bussiAddr) {
            callback();
        } else {
            callback(new Error("请上传营业执照"));
        }
      }
    },
    otherImgLicense(rule, value, callback) { //验证规则
        if (this.ruleForm.otherAddr) {
            callback();
        } else {
            callback(new Error("请上传其他合法执照"));
        }
    },
    backImage(files) {
      let data = new FormData();
      this.ruleForm.picbussi = files;
      this.ruleForm.upload = "1"
      if(this.ruleForm.picType != 9){
        data.append(
        "picbussi",this.ruleForm.picbussi[0] ? this.ruleForm.picbussi[0] : "");
      }
      data.append("picType", this.ruleForm.picType);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      };
      this.$http.post("/trademark/distinguish/picdis", data, config)
      .then((res) => {
        if(this.ruleForm.picType==0){
            this.ruleForm.siteValue = res.data.data.po.address;
            this.ruleForm.nameValue = res.data.data.po.name;
            this.$set(this.ruleForm,'bussiAddr',res.data.data.popath)
        }else if(this.ruleForm.picType==1){
          this.$set(this.ruleForm,'bussiAddr',res.data.data.popath)
        }
      })
    },
    DBImageMain(files) {
      let data = new FormData();
      this.ruleForm.picdbcard = files;
      this.ruleForm.DBupload = "1"
      if(this.ruleForm.picType == 1){
        data.append(
        "picdbcard",
        this.ruleForm.picdbcard[0] ? this.ruleForm.picdbcard[0] : "");
      }
      data.append("picType", this.ruleForm.picType);
      let config = {
        headers: {
        "Content-Type": "multipart/form-data",
        }
      };
      this.$http.post("/trademark/distinguish/picdis", data, config)
      .then((res) => {
        this.$set(this.ruleForm,'DBidcardAddr',res.data.data.picpath);
      })
    },
    backCardImageMain(files){
      let data = new FormData();
      this.ruleForm.picidcard = files;
      this.ruleForm.uploads = "1"
      if(this.ruleForm.picType == 1){
        data.append(
        "picidcard",
        this.ruleForm.picidcard[0] ? this.ruleForm.picidcard[0] : "");
      }
      data.append("picType", this.ruleForm.picType);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      };
      this.$http.post("/trademark/distinguish/picdis", data, config)
      .then((res) => {
        if(this.ruleForm.picType==1){
        this.ruleForm.siteValue = res.data.data.pic.address;
        this.ruleForm.nameValue = res.data.data.pic.name;
        this.$set(this.ruleForm,'idcardAddr',res.data.data.id_card)
        }
      })
    },
    otherImg(files){
      let data = new FormData();
      this.ruleForm.otherAddr = files;
      this.ruleForm.otherUpload = "1"
      if(this.ruleForm.picType == 9){
        data.append(
        "picbussi",this.ruleForm.otherAddr[0] ? this.ruleForm.otherAddr[0] : "");
      }
      data.append("picType", this.ruleForm.picType==1?1:0);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        }
      };
      this.$http.post("/trademark/distinguish/picdis", data, config)
      .then((res) => {
        if(this.ruleForm.picType==9){
          this.$set(this.ruleForm,'otherAddr',res.data.data.popath)
        }
      })
    },
    typeChange() {
      this.img_default = {};
      this.$store.commit("setIdCardInfo", {});
      this.$store.commit("setCompanyCardInfo", {});
      this.$store.commit("setPicType", 0);
    },
    clearz() {
      for (let index = 0; index < this.ruleForm.common.length; index++) {
        if (this.ruleForm.radio == 0) {
          this.ruleForm.common[index].partNameCh = "";
          this.ruleForm.common[index].partNameEn = "";
          this.ruleForm.common[index].partAddrCh = "";
          this.ruleForm.common[index].partAddrEn = "";
        }
      }
    },
    submitCheck(formName) {
      if(this.ruleForm.radio==1){
          if (this.commonData.length == 0) { //没填共有人
          this.open1("请填写共有人信息！", "error");
          return;
          }
      }

      this.$refs[formName].validate((valid) => {
        if (valid && this.uploadImg == true) {
          this.dialogVisible = true;
        } else if (!valid) {
          this.open1("存在错误的格式填写", "error");
        } else {
          this.open1("请上传网上确认书", "error");
        }
      });
    },
    //确认书
    setSure(files) {
      this.uploadImg = true;
      this.ruleForm.qrfiles = files[0];
      this.ruleForm.qrfilesUrl = ""; // 修改img图片地址隐藏img
    },
    //返回上一步
    outStep() {
      this.$emit("wp", 1, "请填写申请业务信息");
    },
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
    //弹出框的选项确认框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
      this.ruleForm.prmsDate =
        this.ruleForm.prmsDate.getFullYear() +
        "-" +
        (this.ruleForm.prmsDate.getMonth() + 1) +
        "-" +
        this.ruleForm.prmsDate.getDate();

      //console.log(this.ruleForm.prmsDate);
    },

    //跳转函数
    skip() {
      this.centerDialogVisible = false;
      this.open1("操作成功");
      this.$router.push({
        path: "/business/myBusiness/auditing",
      });
    },
    // 处理时间
    timedispose(date) {
      var date = new Date();
      return `${date.getFullYear()}-${this.zero(date.getMonth())}-${this.zero(
        date.getDate()
      )}`;
    },
    zero(n) {
      return n > 10 ? n : "0" + n;
    },
    //点击添加更变许可人
    plus() {
      // let objCommom = JSON.parse(JSON.stringify(this.proAppends[0]));
      // this.proAppends.push(objCommom);
      //let objValue = JSON.parse(JSON.stringify(this.common[0]))
      this.ruleForm.common.push({
        name: "更变前名称(中文)：",
        englishName: "(英文)：",
        site: "变更前地址(中文)：",
        englishSite: "(英文)：",
        partNameCh: "",
        partNameEn: "",
        partAddrCh: "",
        partAddrEn: "",
      });
    },
    dele() {
      this.ruleForm.common.pop();
    },
    // 删减共有人
    cutShare(index) {
      this.ruleForm.common.splice(index, 1);
    },
    // 日期格式转换
    // dataForm() {
    //   let nowDate = this.formData.prmsDate
    //   let year = nowDate.getFullYear()
    //   let month = nowDate.getMonth() + 1
    //   let day = nowDate.getDate()
    //   if (month < 10) month = '0' + month
    //   if (day < 10) day = '0' + day
    //   return year + '-' + month + '-' + day
    // },

    //表单提交事件
    submitForm(formName) {
      let _this = this;
      if (this.branchNetworkId != "") {
        //每次提交重新生成新的FormData用于储存新的数据
        this.formData = new FormData();
        this.dialogVisible = false;
        //获取vuex中保存的步骤二中的数据
        // 第一、二步vuex里面的数据传送
        console.log(this.$store.getters.getRuleForm,"获取vuex的内容")
        let arr = this.$store.getters.getRuleForm;
        for (let key in arr) {
          this.formData.append(key, arr[key]);
        }
        // 第三步-我的数据

        this.formData.append("classId", this.classId); // 业务唯一编号

        this.formData.append("appNum", this.ruleForm.loginNum); // 商标注册号
        // this.formData.append("contacts", this.ruleForm.Linkman); // 联系人
        this.formData.append("beNameLicensee", this.ruleForm.nameValue); // 被许可人名称（中文）
        this.formData.append("beNameLicenseeAddr", this.ruleForm.siteValue); // 被许可人地址(中文)
        this.formData.append("beNameLicenseeAddrEn",this.ruleForm.englishSiteValue); // 被许可人地址(英文)
        this.formData.append("beNameLicenseeEn", this.ruleForm.englishValue); // 被许可人名称（英文）
        this.formData.append("branchNetworkId", this.branchNetworkId); // 网点编号
        this.formData.append("endDate", this.ruleForm.prmsDate); // 提前终止日期
        this.formData.append("endWithdrawal", this.ruleForm.endWithdrawal); // 提前终止理由
        this.formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile));
        this.formData.append("isShare", this.ruleForm.radio); // 是否有共有商标
        this.formData.append("licenseRecordNumber", this.ruleForm.originNum); // 原商标使用许可备案号

        // this.formData.append("proxyOrganizationName", this.ruleForm.organization);  // 代理机构名称
        this.formData.append("qrfiles", this.ruleForm.qrfiles); // 网上确认书

        this.formData.append("selectType", this.ruleForm.picType); // 被许可人类型
          if(this.ruleForm.picType == 1){
            this.formData.append("licenseesIdcardimg", this.ruleForm.idcardAddr); // 身份证正面地址
          }
          this.formData.append("iddbimage", this.ruleForm.DBidcardAddr); // 身份证正反面地址
          this.formData.append("licenseesBusimg", this.ruleForm.bussiAddr?this.ruleForm.bussiAddr:this.ruleForm.otherAddr) // 营业执照地址
         
        this.formData.append(
          "proAppends",
          JSON.stringify(this.commonData)
        ); // 共有人

        /************* 请求开始 **********/
        let urls = "";
        if (this.$store.state.stateJdg) {
          this.formData.append("id", this.$store.state.storeId); // 修改才需要传的id
          this.formData.append(
            "modelId",
            this.$store.state.alterData.public.modelId
          ); // 修改才需要传的modelId

          urls = "trademark/tletof/modifyNoCommit"; // 修改
        } else {
          urls = "trademark/tletof/firstSubmit"; // 新增
        }
        //配置请求头
        var config = {
          header: {
            "Content-Type": "multipart/form-data",
          },
        };
        this.$http
          .post(urls, this.formData, config)
          .then(function (response) {
            //console.log(response);
            //若状态码不为200则不跳转v bvb vvccvb vbvbcgvbc
            if (response.data.code != 200) {
              _this.open1("提交失败", "error");
              return;
            }
            //提交成功
            _this.centerDialogVisible = true;
            this.$store.commit("storeDatas", {});
            this.$store.commit("setPicType", 0);
            this.$store.commit("setCompanyCardInfo", {});
            this.$store.commit("setIdCardInfo", {});
          })
          .catch(function (error) {
            //////console.log(error);
          });

        /************* 请求结束 **********/
      } else {
        this.open1("请选择网点编号", "error");
        return false;
      }
    },
  },
  created() {
    //获取从存储在路由中的classId
    this.classId = this.$route.query.id;
    //获取网点列表
    this.$http.get("trademark/system/dept/findDept").then((res) => {
      this.options = res.data.data;
    });
  },
  mounted() {
    // 如果是修改操作，数据回显:
    this.appliPerson = this.mconfig.options;
    console.log(this.mconfig.options[0].title)
    if (this.$store.state.stateJdg) {
      this.showImgOne = true
      this.showImgTwo = true
      console.log(6666666);
      this.uploadImg = true;
      let formDa = {};
      this.classId = this.$route.query.id;
      let getCommonArr = this.$store.state.alterData.append;
      let {
        appNum,
        beNameLicensee,
        beNameLicenseeAddr,
        beNameLicenseeAddrEn,
        beNameLicenseeEn,
        branchNetworkId,
        // contacts,
        endDate,
        otherfile,
        endWithdrawal,
        isShare,
        licenseRecordNumber,
        proxyOrganizationName,
        qrfile,
        append,
        selectType,
        licenseesIdcardimg,
        licenseesBusimg,
        iddbimage,
      } = Object.assign(
        this.$store.state.alterData.public,
        this.$store.state.alterData.data
      );

      // 开始回显
      this.ruleForm.loginNum =  appNum; //  商标注册号
      this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);
      this.ruleForm.nameValue = beNameLicensee; //  被许可人名称（中文）
      this.ruleForm.siteValue = beNameLicenseeAddr; //被许可人地址(中文)
      this.ruleForm.englishSiteValue = beNameLicenseeAddrEn; // 被许可人地址(中文)
      this.ruleForm.englishValue = beNameLicenseeEn; // 被许可人名称（英文）
      this.branchNetworkId = JSON.parse(branchNetworkId); // 网点编号
      // this.ruleForm.Linkman = contacts; // 联系人
      this.ruleForm.prmsDate = endDate; // 提前终止日期
      this.ruleForm.endWithdrawal = endWithdrawal; // 提前终止理由
      this.ruleForm.radio = Number(isShare); // 是否有共有商标
      this.ruleForm.originNum = licenseRecordNumber; // 原商标使用许可备案号
      // this.ruleForm.qrfilesUrl = this.mconfig.host + String(qrfile); // 后端返回确认书地址
      this.ruleForm.qrfilesUrl = this.mconfig.host + String(qrfile); // 后端返回确认书地址
      this.formData.append("classId", this.classId);
      this.ruleForm.picType = Number(selectType);
      this.ruleForm.idcardAddr = licenseesIdcardimg;
      this.ruleForm.bussiAddr = licenseesBusimg;
      this.ruleForm.otherAddr = licenseesBusimg;
      this.ruleForm.DBidcardAddr = iddbimage //身份证正反面
      
      
      // 其他共有人数据回显
      let templateArr = [];
      Array.isArray(getCommonArr) &&
        getCommonArr.forEach((item, index) => {
          templateArr.push({
            name: "更变前名称(中文)：",
            englishName: "(英文)：",
            site: "变更前地址(中文)：",
            englishSite: "(英文)：",
            partNameCh: item.partNameCh,
            partNameEn: item.partNameEn,
            partAddrCh: item.partAddrCh,
            partAddrEn: item.partAddrEn,
          });
        });
      this.ruleForm.common = templateArr;
    }
  },
};
</script>
<style lang="less" scoped>
.btns {
  
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
}
.box2 {
  padding-right: 214px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // margin-top: 100px;
  width: 100%;
  min-height: 800px;
  .tle {
    font-size: 24px;
    color: #000;
  }
  .el-form {
    width: 100%;
    .el-input {
      width: 80%;
   
    }
  }
  .must,
  .select {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    margin-bottom: 80px;
    width: 100%;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .el-form-item {
      width: 680px;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
    }
  }
  .must {
    margin-bottom: 20px;
  }
  .line {
    width: calc(100% - 280px);
    margin: 10px auto;
    height: 1px;
    border-top: 1px dashed #d9d9d9;
  }
  .imgHint {
    margin: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #f5222d;
  }
  .affirm {
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  // .input {
  //   // width: 50px;
  // }
  .upload {
    margin: 20px 0;
  }
  .type-number {
    width: 250px;
  }
  .informs {
    position: absolute;
    width: 500px;
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .inform {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 80%;
    width: 300px;
    height: 32px;
    color: #f5222d;
    font-size: 10px;
    line-height: 16px;
    img {
      margin: 11px;
    }
    .content {
      display: flex;
      flex-direction: column;
      color: #f96900;
      .ts {
        text-indent: 3em;
      }
    }
  }
  .tle {
    list-style: none;
    margin: 40px 0 20px;
    font-size: 24px;
    & ~ .tle {
      color: #bbb;
    }
  }
  .hint {
    color: #f5222d;
    background-color: #fff;

    .el-form-item__label {
      width: 150px;
    }
    img {
      width: 20px;
    }
  }
  .el-steps {
    width: 70%;
    height: 200px;
  }
  .el-button {
    //display: block;
    display: inline;
    margin: 0 20px;
    // background-color: #67c23a !important;
    // border-color: #67c23a !important;
  }
  .notice {
    color: #f00;
    font-size: 12px;
  }
  .common .el-button {
    background-color: #fff !important;
    border-color: #bbb !important;
  }
  .common-list {
    position: relative;

    .less {
      position: absolute;
      right: -5rem;
      top: 1.5rem;
      width: 5rem;
      text-align: center;
      font-size: 1rem;
      i {
        margin: 0 0.5rem;
      }
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-between;
  color: #fff;
  .lan {
    background-color: #2c9dfc !important;
    border-color: #2c9dfc !important;
  }
}

.dialog /deep/.el-form-item__label {
  // border: 1px solid red;
  margin-left: 20px;
  width: 100px !important;
}
.dialog /deep/.el-form-item__content {
 
  display: flex;
  justify-content: left;
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}
.dialog /deep/.el-input {
  width: 250px;
}
.el-checkbox-group {
  line-height: 14px;
}
.is-checked/deep/.el-radio__inner,
.is-checked/deep/.el-checkbox__inner {
  border-color: #409eff;
  background: #409eff;
}
.el-radio/deep/.el-radio__inner:hover {
  border-color: #999999 !important;
}
.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
  color: #333;
}
.is-focus .el-checkbox__inner {
  border-color: #999999 !important;
}
.el-checkbox/deep/.el-checkbox__inner:hover {
  border-color: #999999 !important;
}
.el-step__head.is-process {
  border-color: #f96900;
  color: #f96900 !important;
}
.hintMsg {
  /deep/.el-dialog__header {
    display: flex;
    justify-content: center;
    font-weight: bold;
  }
  .dialog-footer {
    justify-content: center;
    .el-button {
      border-color: #2c9dfc !important;
      background: #2c9dfc !important;
    }
  }
}

//fiexed dialog 0902

/deep/ .el-dialog.el-dialog--center /deep/ {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 20px;
  }

  .hint {
    color: #f96900;
    background-color: #fff;
    padding: 0;
    padding-bottom: 20px;
  }

  .el-button {
    margin: 0;
  }

  .el-form-item__label {
    width: 86px !important;
  }
}
#star{
  position: absolute;
  color: red;
  margin-left: -120px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 465px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style> 
